<template>
  <div>
    <!-- 未加载是显示的内容 -->
    <p v-if="films === null" class="loading">Loading...</p>
    <!-- films数据改变时显示的内容 -->
    <ul v-else>
      <FilmItem
        v-for="item in films"
        :key="item.filmId"
        :item="item"
      ></FilmItem>
    </ul>
  </div>
</template>

<script>
import { getComings } from "@api/movieApi";
import FilmItem from "./FilmItem.vue";
export default {
  components: {
    FilmItem,
  },
  data() {
    return {
      // 电影数据
      films: null,
    };
  },

  // 组件被挂载时获取数据
  mounted() {
    getComings().then((res) => (this.films = res));
  },
};
</script>

<style lang="scss" scoped>
.loading {
  background-color: rgb(230, 228, 228);
  text-align: center;
}
</style>
